<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>订单详情页面</title>
    <link rel="stylesheet" href="./plugins/bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        hr{
            margin: 0;
        }
        img{
            width: 100%;
        }
        ul{
            border: 0;
        }
        .list-group-item{
            margin-bottom: 0;
            border: 0;
            border-bottom: 1px dashed #ddd;
            background-color: inherit;
        }
        .list2{
            border-bottom: 0;
        }
        .table>tbody>tr>th{
            text-align: center;
            border-bottom: 0;
            border-top: 0;
            background: #fafafa url(http://s8.mogucdn.com/pic/140909/1blhwf_ieydemldmy4tombtmmytambqgiyde_5x40.gif) repeat-x;
        }
        .table>tbody>tr>td{
            position: relative;
            text-align: center;
            border-bottom: 1px solid #ddd;
        }
        .table>tbody>tr>td:first-child{
            border-left: 1px solid #ddd;
        }
        .table>tbody>tr>td:last-child{
            border-right: 1px solid #ddd;
        }
        table tr td img{
            width: 80px;
            height: 80px;
        }
        #touxiang{
            width: 50px;
            height: 50px;

            /* 设置边框为圆形 */
            border-radius: 50%;
        }
    </style>
</head>
<body>
<!--顶部导航-->
<div id="top-part">
    <!-- 导航begin -->
 <div class="container-fluid">
    <div class="row">
    <nav class="navbar navbar-inverse" role="navigation">
        <div class="container-fluid"> 
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">衣二三</a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-home"></span>首页</a></li>
                <li><a href="#" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-lock"></span>登陆</a></li>
                <li><a href="#" data-toggle="modal" data-target="#myModal1"><span class="glyphicon glyphicon-check"></span>注册</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span>我的购物车</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-user"></span>个人中心</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-off"></span>安全退出</a></li> 
                
                <!-- 在用框架的使用，任何一个标签都会存在一些样式 -->
                <li><img src="./images/头像.png" id="touxiang"></li>
            </ul>
        </div>
        </div>
    </nav>
    </div>
</div>
</div>
<div id="search-part"></div>

<!--主体内容-->

<div class="container" >
    <div class="row" >
        <div class="col-md-12" >
            <table class="table" style="margin-top: 50px;">
                <tbody>
                    <tr>
                        <th colspan="3">商品信息</th>
                        <th>售后</th>
                        <th>实付款（元）</th>
                        <th>交易状态</th>
                        <th>操作</th>
                    </tr>
                    <tr><td colspan="7" style="border: 0"></td></tr>
                    <tr>
                        <td colspan="7" style="text-align: left;background-color: cornsilk">订单编号：12222212212&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;下单时间：2019.12.21</td>
                    </tr>
                    <tr>
                        <td class="col-sm-1">
                            <img src="./images/女装图1.jpg" alt="">
                        </td>
                        <td ><br>商品名称商品名称</td>
                        <td><br>颜色：<br>尺码：</td>
                        <td><br>退款</td>
                        <td><br>价格<br>(包邮)</td>
                        <td ><br<button class="btn btn-link"><br>订单跟踪</td>
                        <td><br<button class="btn btn-link" type="button" onclick="window.location.href='退款页面.html'"><br>取消订单</td>
                    </tr>
                    <tr><td colspan="7" style="border: 0"></td></tr>
                    <tr>
                        <td colspan="7" style="text-align: left;background-color: cornsilk">订单编号：12222212212&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;下单时间：2019.12.21</td>
                    </tr>
                    <tr>
                        <td class="col-sm-1">
                            <img src="./images/女装图2.jpg" alt="">
                        </td>
                        <td ><br>商品名称商品名称</td>
                        <td><br>颜色：<br>尺码：</td>
                        <td><br>退款</td>
                        <td><br>价格<br>(包邮)</td>
                        <td ><br<button class="btn btn-link"><br>订单跟踪</td>
                        <td><br<button class="btn btn-link"><br>取消订单</td>
                    </tr>
                    <tr><td colspan="7" style="border: 0"></td></tr>
                    <tr>
                        <td colspan="7" style="text-align: left;background-color: cornsilk">订单编号：12222212212&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;下单时间：2019.12.21</td>
                    </tr>
                    <tr>
                        <td class="col-sm-1">
                            <img src="./images/女装图3.jpg" alt="">
                        </td>
                        <td ><br>商品名称商品名称</td>
                        <td><br>颜色：<br>尺码：</td>
                        <td><br>退款</td>
                        <td><br>价格<br>(包邮)</td>
                        <td ><br<button class="btn btn-link"><br>订单跟踪</td>
                        <td><br<button class="btn btn-link"><br>取消订单</td>
                    </tr>
                    <tr><td colspan="7" style="border: 0"></td></tr>
                    <tr>
                        <td colspan="7" style="text-align: left;background-color: cornsilk">订单编号：12222212212&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;下单时间：2019.12.21</td>
                    </tr>
                    <tr>
                        <td class="col-sm-1">
                            <img src="./images/女装图4.jpg" alt="">
                        </td>
                        <td ><br>商品名称商品名称</td>
                        <td><br>颜色：<br>尺码：</td>
                        <td><br>退款</td>
                        <td><br>价格<br>(包邮)</td>
                        <td ><br<button class="btn btn-link"><br>订单跟踪</td>
                        <td><br<button class="btn btn-link"><br>取消订单</td>
                    </tr>
                    <tr><td colspan="7" style="border: 0"></td></tr>
                    <tr>
                        <td colspan="7" style="text-align: left;background-color: cornsilk">订单编号：12222212212&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;下单时间：2019.12.21</td>
                    </tr>
                    <tr>
                        <td class="col-sm-1">
                            <img src="./images/童装图1.jpg" alt="">
                        </td>
                        <td ><br>商品名称商品名称</td>
                        <td><br>颜色：<br>尺码：</td>
                        <td><br>退款</td>
                        <td><br>价格<br>(包邮)</td>
                        <td ><br<button class="btn btn-link"><br>订单跟踪</td>
                        <td><br<button class="btn btn-link"><br>取消订单</td>
                    </tr>
                    <tr><td colspan="7" style="border: 0"></td></tr>
                    <tr>
                        <td colspan="7" style="text-align: left;background-color: cornsilk">订单编号：12222212212&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;下单时间：2019.12.21</td>
                    </tr>
                    <tr>
                        <td class="col-sm-1">
                            <img src="./images/童装图2.jpg" alt="">
                        </td>
                        <td ><br>商品名称商品名称</td>
                        <td><br>颜色：<br>尺码：</td>
                        <td><br>退款</td>
                        <td><br>价格<br>(包邮)</td>
                        <td ><br<button class="btn btn-link"><br>订单跟踪</td>
                        <td><br<button class="btn btn-link" ><br>取消订单</td>
                    </tr>
                    <tr><td colspan="7" style="border: 0"></td></tr>
                    <tr>
                        <td colspan="7" style="text-align: left;background-color: cornsilk">订单编号：12222212212&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;下单时间：2019.12.21</td>
                    </tr>
                    <tr>
                        <td class="col-sm-1">
                            <img src="./images/童装图3.jpg" alt="">
                        </td>
                        <td ><br>商品名称商品名称</td>
                        <td><br>颜色：<br>尺码：</td>
                        <td><br>退款</td>
                        <td><br>价格<br>(包邮)</td>
                        <td ><br<button class="btn btn-link"><br>订单跟踪</td>
                        <td><br<button class="btn btn-link"><br>取消订单</td>
                    </tr>
                    <tr><td colspan="7" style="border: 0"></td></tr>
                    <tr>
                        <td colspan="7" style="text-align: left;background-color: cornsilk">订单编号：12222212212&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;下单时间：2019.12.21</td>
                    </tr>
                    <tr>
                        <td class="col-sm-1">
                            <img src="./images/童装图4.jpg" alt="">
                        </td>
                        <td ><br>商品名称商品名称</td>
                        <td><br>颜色：<br>尺码：</td>
                        <td><br>退款</td>
                        <td><br>价格<br>(包邮)</td>
                        <td ><br<button class="btn btn-link"><br>订单跟踪</td>
                        <td><br<button class="btn btn-link"><br>取消订单</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!-- 分页begin -->
    <div class="container text-center">
        <ul class="pagination">
            
            <li><a href="#">首页</a></li>
            <li><a href="#">&laquo;</a></li>
            <li><a href="#">1</a></li>
            <li class="disabled"><a href="#">2</a></li>
            <li class="active"><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">&raquo;</a></li>
            <li><a href="#">尾页</a></li>
            <li><a href="#">当前页3/5总页</a></li>
        </ul>
    </div>
    <div class="centainer" style="height: 150px;"></div>
    <!-- <div class="row">
        <div class="col-md-12" >
            <div><button type="button" class="btn btn-default col-sm-offset-2 col-sm-3" onclick="window.location.href='订单提交成功.html'">返回上一层</button></div>
            <div><button type="button" class="btn btn-default col-sm-offset-1 col-sm-3" onclick="window.location.href='index.html'">返回首页</button></div>
            <div class="centainer" style="height: 150px;"></div>
        </div> -->
        <!-- 登录模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                &times;
              </button>
              <h4 class="modal-title" id="myModalLabel">
                用户登陆入口
              </h4>
            </div>
            <div class="modal-body">
                      <form class="form-horizontal" role="form">
                          <div class="form-group has-feedback">
                            <label for="firstname" class="col-sm-2 control-label">用户名</label>
                            <div class="col-md-6">
                              <input type="text" class="form-control" id="firstname" placeholder="请输入名字">
                              <span class="glyphicon glyphicon-user form-control-feedback"></span>
                            </div>
                          </div>
                          <div class="form-group has-feedback">
                            <label for="lastname" class="col-sm-2 control-label">密码</label>
                            <div class="col-md-6">
                              <input type="password" class="form-control" id="password" placeholder="请输入密码">
                              <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                            </div>
                          </div>
                          <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                              <div class="checkbox">
                                <label>
                                  <input type="checkbox">请记住我
                                </label>
                              </div>
                            </div>
                          </div>
                          <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                              <button type="submit" class="btn btn-default">登录</button>
                            </div>
                          </div>
                        </form>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal -->
      </div>
  
      <!-- 注册模态框 -->
      <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                &times;
              </button>
              <h4 class="modal-title" id="myModalLabel">
                用户注册入口
              </h4>
            </div>
            <div class="modal-body">
                      <form class="form-horizontal" role="form">
                          <div class="form-group has-feedback">
                            <label for="firstname" class="col-sm-2 control-label">用户名</label>
                            <div class="col-md-6">
                              <input type="text" class="form-control" id="firstname" placeholder="请输入名字">
                              <span class="glyphicon glyphicon-user form-control-feedback"></span>
                            </div>
                          </div>
                          <div class="form-group has-feedback">
                            <label for="lastname" class="col-sm-2 control-label">密码</label>
                            <div class="col-md-6">
                              <input type="password" class="form-control" id="password" placeholder="请输入密码">
                              <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                            </div>
                          </div>
                          <!-- <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                              <div class="checkbox">
                                <label>
                                  <input type="checkbox">请记住我
                                </label>
                              </div>
                            </div>
                          </div> -->
                          <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                              <button type="submit" class="btn btn-default">注册</button>
                            </div>
                          </div>
                        </form>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal -->
      </div>
</body>
<script src="./plugins/jquery/jquery.min.js"></script>
<script src="./plugins/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script type="text/javascript">
    $("#top-part").load("top-part.html");
    $("#search-part").load("search-part.html");
    $("#userimg-part").load("userimg-part.html");
</script>
</html>